Apollo-client 的Incremental loading(增量加载)

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 156 | 阅读时长 ≈ 1

Incremental loading

fetchmore方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const FeedQuery = gql`
  query Feed($type: FeedType!, $offset: Int, $limit: Int) {
    # ...
  }`;

const FeedWithData = graphql(FeedQuery, {
  props({ data: { loading, feed, currentUser, fetchMore } }) {
    return {
      loading,
      feed,
      currentUser,
      loadNextPage() {
        return fetchMore({
          variables: {
            offset: feed.length,
          },

          updateQuery: (previousResult, { fetchMoreResult }) => {
            if (!fetchMoreResult) { return previousResult; }

            return Object.assign({}, previousResult, {
              feed: [...previousResult.feed, ...fetchMoreResult.feed],
            });
          },
        });
      },
    };
  },
})(Feed);

执行查询任务的时候, props里会有一个length属性, 可以作为无限加载的一个偏移标记,比如在 cnode 的查询 REST中,如果下一页page+1,就可以用这个 length+1来作为下一个加载的查询参数

1
page=length+1